<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <div>
      <span @click = "fn('一')" >type1</span>
      <span @click = "fn('二')" >type2</span>
      <span @click = "fn('三')" >type3</span>
    </div>
    <div>
        <span :style= "aa"><a href="" @click.prevent="fu()">ghgjkfghj</a></span>
        <span :style= "bb"><div>
            <div>
                <div @click.stop = 'qq()'>2222</div>
            </div>
        </div></span>
        <span :style= "cc">3333</span>
    </div>

</div>

<script>
    new Vue({
        el:'#app',
        data:{
            aa:'',
            bb:'display: none;',
            cc:'display: none;'
        },
        methods:{
            fn(i){
               if(i == '一'){
                this.aa = ''
                this.bb = 'display: none;'
                this.cc = 'display: none;'
               }else if(i == '二'){
                this.aa = 'display: none;'
                this.bb = ''
                this.cc = 'display: none'
               }else if(i == '三'){
                this.aa = 'display: none;'
                this.bb = 'display: none;'
                this.cc = ''
               }
            },
            fu(){
                console.log(111)
            },
            qq(){
                console.log(222)
            }
        }

    })
</script>
